<template>
  <div class="Drag2">
    <div class="box" ref="box">
      <div class="left">
        <!--左侧div内容-->
        <div><h2>{{questionInfo.id}}-{{questionInfo.title}}</h2></div>
        <div style="height: 90%; overflow: auto;">
          <div v-html="questionInfo.description"></div>
        </div>
      </div>
      <div class="resize" title="左右侧边栏">|</div>
      <div class="mid">
        <!--右侧div内容-->
          <div style="text-align: left;height: 100%;">
            <a-form :model="questionInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-form-item label="题目名称">
                <a-input v-model:value="questionInfo.title" />
              </a-form-item>
              <a-form-item label="题目标识">
                <a-input v-model:value="questionInfo.titleSlug" />
              </a-form-item>
              <a-form-item label="题目类型">
                <a-select
                    v-model:value="questionInfo.type"
                    :options="questionType"
                    :field-names="{ label: 'name', value: 'id' }"
                    mode="multiple"
                    :size="size"
                    placeholder="Please select"
                    style="width: 200px"
                    @change="typeChange"
                ></a-select>
              </a-form-item>
              <a-form-item label="难度">
                <a-rate v-model:value="score.score" :count="difficultyName.length" :tooltips="difficultyName" />
                <span class="ant-rate-text">{{ difficultyName[score.score -1] }}</span>
              </a-form-item>
              <a-row>
                <a-col>
                  <a-form-item label="题目时间限制">
                    <a-input-number v-model:value="questionInfo.limitedTime" :min="1" :max="10000" />
                  </a-form-item>
                </a-col>
                <a-col>
                  <a-form-item label="题目内存限制">
                    <a-input-number v-model:value="questionInfo.limitedMemory" :min="1" :max="10" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item label="答案">
                <a-upload
                    v-model:file-list="answerFile"
                    name="file"
                    :max-count="1"
                    :action="`http://localhost:8000/code-executor/uploadFile?objectName=/answer/${questionInfo.titleSlug}.txt`"
                    :headers="headers"
                    @change="handleFileChange1"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>
                    Click to Upload
                  </a-button>
                </a-upload>
              </a-form-item>
              <a-form-item label="测试用例">
                <a-upload
                    v-model:file-list="testFile"
                    name="file"
                    :max-count="1"
                    :action="`http://localhost:8000/code-executor/uploadFile?objectName=/test/${questionInfo.titleSlug}.txt`"
                    @change="handleFileChange2"
                >
                  <a-button>
                    <upload-outlined></upload-outlined>
                    Click to Upload
                  </a-button>
                </a-upload>
              </a-form-item>
              <a-form-item label="题目描述">
                <a-textarea v-model:value="questionInfo.description" placeholder="题目表述（html)" :rows="10" />
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" @click="onSubmit">确认</a-button>
                <a-button style="margin-left: 10px">取消</a-button>
              </a-form-item>
            </a-form>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { usePagination } from 'vue-request';
import {computed, defineComponent, onMounted, reactive, ref, toRaw} from 'vue';
import axios from 'axios';
import {isReturnTrue} from "@/util/util";
import {useRouter} from "vue-router";


export default defineComponent({
  setup() {
    const router=useRouter();
    const onSubmit = () => {

      console.log(questionInfo)
      questionInfo.types=questionInfo.type.toString();
      questionInfo.difficulty=difficulty.value[score.score-1].code;
      axios.post("/core/t-question/manager/add",questionInfo).then((response)=>{
        if(isReturnTrue(response.data.code)){
          alert("操作成功");
          getQuestionInfo();
        }
        else{
          alert(response.data.message);
        }
      })
    };
    const difficultyName = reactive([]);
    const getDifficultyScore=(code)=>{
      let res=0;
      for (let i = 0; i < difficulty.value.length; i++) {
        if(difficulty.value[i].code===code){
          res=i;
          break;
        }
      }
      return res+1;
    }
    const difficulty=ref([{
      name:'',
      code:'',
      color:'',
      score:''
    }]);
    const score=reactive({score:''});
    const titleSlug=ref(router.currentRoute.value.params.id)
    const questionInfo=reactive({
      title:'',
      titleSlug:'',
      description:'',
      type:[],
      difficulty:'',
      limitedTime:'',
      limitedMemory:'',
      payOnly:'N',
      answerUrl:'',
      testUrl:'',
      id:'',
      testFile:{
        name:'',
        url:''
      },
      answerFile:{
        name:'',
        url:''
      },
      types:''
    })

    const getAllDifficulty=()=>{
      axios.get("/core/enum/difficulty").then((response)=>{
        if(isReturnTrue(response.data.code)){
          difficulty.value=response.data.data;
          for (let i = 0; i < response.data.data.length; i++) {
            difficultyName.push(response.data.data[i].name);
          }
          console.log(difficultyName)
        }
        else{
          alert(response.data.message);
        }
      })
    }
    const getQuestionInfo=()=>{
      let _questionInfo=questionInfo;
      axios.get("/core/t-question/manager/info/"+titleSlug.value).then((response)=>{
        if(isReturnTrue(response.data.code)){
          _questionInfo.id=response.data.data.id
          _questionInfo.description=response.data.data.description;
          _questionInfo.title=response.data.data.title;
          _questionInfo.titleSlug=response.data.data.titleSlug;
          _questionInfo.difficulty=response.data.data.difficulty
          score.score=getDifficultyScore(response.data.data.difficulty).toString();
          console.log("score"+score.score)
          _questionInfo.type=response.data.data.types.split(',')
          _questionInfo.type=_questionInfo.type.map(item=>Number(item));
          _questionInfo.payOnly=response.data.data.payOnly
          _questionInfo.limitedMemory=response.data.data.limitedMemory
          _questionInfo.limitedTime=response.data.data.limitedTime
          _questionInfo.answerUrl=response.data.data.answerUrl
          _questionInfo.testUrl=response.data.data.testUrl
          testFile.value[0].name=response.data.data.testFile.name
          testFile.value[0].url=response.data.data.testFile.url
          answerFile.value[0].name=response.data.data.answerFile.name
          answerFile.value[0].url=response.data.data.answerFile.url
          console.log(questionInfo)
          console.log(questionInfo.type)
        }
        else{
          alert(response.data.message);
          return;
        }
      })
    };
// 左右拖动事件
    function dragControllerLR() {
      let resize = document.getElementsByClassName("resize");
      let left = document.getElementsByClassName("left");
      let mid = document.getElementsByClassName("mid");
      let box = document.getElementsByClassName("box");
      console.log(document.getElementsByClassName("resize"));
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = "#818181";
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endX = e.clientX;
            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < 50) moveLen = 50; // 左边区域的最小宽度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150; //右边区域最小宽度为150px

            resize[i].style.left = moveLen; // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + "px";
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + "px";
            }
          };
          // 鼠标松开事件
          // eslint-disable-next-line no-unused-vars
          document.onmouseup = function (evt) {
            //颜色恢复
            resize[i].style.background = "#d6d6d6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    }
// 上下拖动事件
    function dragControllerUD() {
      let resize = document.getElementsByClassName("move");
      let topBox = document.getElementsByClassName("topBox");
      let downBox = document.getElementsByClassName("downBox");
      let box = document.getElementsByClassName("mid");
      console.log(document.getElementsByClassName("move"));
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          console.log(resize[i].top);
          //颜色改变提醒
          resize[i].style.background = "#818181";
          let startY = e.clientY;
          resize[i].top = resize[i].offsetTop;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            var endY = e.clientY;
            var moveLen = resize[i].top + (endY - startY); // （endY - startY）=移动的距离。resize[i].top+移动的距离=上边区域最后的高度
            var maxT = box[i].clientHeight - resize[i].offsetHeight; // 容器高度 - 上边区域的高度 = 下边区域的高度

            if (moveLen < 50) moveLen = 50; // 上边区域的最小高度为50px
            if (moveLen > maxT - 150) moveLen = maxT - 150; //下边区域最小高度为150px

            resize[i].style.top = moveLen; // 设置上边区域的高度

            for (let j = 0; j < topBox.length; j++) {
              topBox[j].style.height = moveLen + "px";
              downBox[j].style.height = box[i].clientHeight - moveLen - 10 + "px";
            }
          };
          // 鼠标松开事件
          document.onmouseup = function () {
            //颜色恢复
            resize[i].style.background = "#d6d6d6";
            document.onmousemove = null;
            document.onmouseup = null;
            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    };
    const handleFileChange1 = info => {
      console.log(answerFile.value[0].response?.data)
      const af=answerFile.value[0].response?.data
      questionInfo.answerUrl=af
    };
    const handleFileChange2 = info => {
      console.log(testFile.value[0].response?.data)
      const af=testFile.value[0].response?.data
      questionInfo.testUrl=af
    };
    const answerFile=ref([{
      name:questionInfo.answerFile.name,
      url:questionInfo.answerFile.url,
      status:'done'
    }]);
    const testFile=ref([{
      name:questionInfo.answerFile.name,
      url:questionInfo.answerFile.url,
      status:'done'
    }]);
    const questionType=ref([{
      id:'',
      code:'',
      name:'',
      value:''
    }]);
    const getAllTypes=()=>{
      axios.get("/core/t-question-type/all").then((response)=>{
        if(isReturnTrue(response.data.code)){
          questionType.value=response.data.data;
          questionType.value.forEach(item=>{
              item.value=item.id;
          })
          console.log(questionType.value)
        }
        else{
          alert(response.data.message);
        }
      })
    }
    const typeChange=()=>{
      console.log(questionInfo.type)
    }
    onMounted(()=>{
      getAllTypes();
      dragControllerLR();
      dragControllerUD();
      getAllDifficulty();
      getQuestionInfo();
    })
    return {
      titleSlug,
      getDifficultyScore,
      answerFile,
      testFile,
      questionInfo,
      difficultyName,
      getAllDifficulty,
      handleFileChange1,
      handleFileChange2,
      score,
      difficulty,
      typeChange,
      headers: {
        authorization: 'authorization-text',
      },
      labelCol: {
        style: {
          width: '150px',
        },
      },
      wrapperCol: {
        span: 14,
      },
      onSubmit,
      getAllTypes,
      questionType,
      size: ref('middle'),
    };
  },
});

</script>
<style>

/* 拖拽相关样式 */

/*包围div样式*/
.box {
  width: 100%;
  /*height: calc(98vh - 10px);*/
  height: 120vh;
  margin: 1% 0px;
  overflow: hidden;
  box-shadow: -1px 9px 10px 3px rgba(0, 0, 0, 0.11);
}
/*左侧div样式*/
.left {
  width: calc(32% - 10px); /*左侧初始化宽度*/
  height: 100%;
  /*background: #71ad88;*/
  float: left;
  text-align: left;
  overflow: hidden;
}
/* 拖拽区div样式 */
.resize {
  cursor: w-resize;
  float: left;
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}

/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}
/*右侧div'样式*/
.mid {
  float: left;
  width: 68%; /*右侧初始化宽度*/
  height: 100%;
  background: #f3f3f3;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
}
/*上方div'样式*/
.topBox {
  height: 60%;
  background-color: #3ff53f;
  display: flex;
}
/*下方div'样式*/
.downBox {
  height: calc(40% - 10px);
  display: flex;
}
/* 拖拽区div样式 */
.move {
  cursor: s-resize;
  width: 50px;
  height: 10px;
  background-color: #d6d6d6;
  margin: 0 auto;
  border-radius: 5px;
  text-align: center;
  line-height: 3px;
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.move:hover {
  color: #444444;
}


</style>
